@import '../../colors.scss';

.area {
	height: 200px;
	position: relative;
	overflow-y: scroll;
	padding-left: 10px;
	background-color: $white_1;

	&::-webkit-scrollbar {
		width: 6px;
	}
	&::-webkit-scrollbar-track {
		background-color: $gray_2;
	}
	&::-webkit-scrollbar-thumb {
		background-color: $blue_1;
	}

	&>.item {
		display: flex;
		color: $black_2;
		align-items: center;
		justify-content: space-between;
		transition: all .1s ease;
		font: {
			size: 18px;
		}
		padding: 6px 20px 2px 10px;
		border-bottom: 1px solid $blue_2;

		&>span {
			max-width: calc(100vw - 320px);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		&:hover {
			background-color: $blue_2;
		}

		&>.remove {
			display: inline-flex;
			margin-left: 5px;

			&:hover {
				cursor: pointer;
			}
		}
	}
}
